<script setup lang="ts">
import {ref, onMounted, reactive} from "vue";
import useStore from "../../modules/store/proOrder"
import {ElMessage, ElMessageBox} from "element-plus";
import type { FormInstance } from 'element-plus'

const store = useStore()
// console.log(store.dynamic)
// 数据渲染的列表
// const searchList = computed(() => store.dynamic());
// console.log(searchList.value.length)
// 控制对话框的显示与隐藏的开关
const dialogVisible = ref(false)
let key: number = ref(0)
// 定义了一个类型判定


const handleClose = (done: () => void) => {
  ElMessageBox.confirm('Are you sure to close this dialog?')
      .then(() => {
        done()
      })
      .catch(() => {
        // catch error
      })
}
// const onSubmit = ()=> {
//   dialogVisible.value = false
//   if(formInline.commodity===''||formInline.price===0||formInline.amount===0||formInline.state===''||formInline.CreationTime===''){
//     ElMessage({
//       type: 'error',
//       message: '有参数错误'
//     })
//     return
//   }
//   store.editA(formInline,key)
// }

const handleDelete = (index: number, row: any) => {
  console.log(index, row)
  store.filterB(row.key)
}

onMounted(()=>{
  store.request()
});


const formRef = ref<FormInstance>()
const formInline = reactive({
  commodity: '',
  price: 0,
  amount: 0,
  state: '',
  quantity: 0,
  CreationTime: ''
})
const handleEdit = (index: number, row: any) => {
  dialogVisible.value = true
  console.log(index, row)
  key = row.key
}
const onSubmit = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid:boolean) => {
    if (valid) {
      dialogVisible.value = false
      store.editA(formInline,key)
      console.log('submit!')
    } else {
      console.log('error submit!')
      return false
    }
  })
}
</script>

<template>
  <el-table :data="store.searchListA"
            max-height="350"
            style="width: 100%;margin: 30px 0">
    <el-table-column type="selection" width="55"/>
    <el-table-column label="订单编号" width="100">
      <template #default="scope">
        {{scope.row.key}}
      </template>
    </el-table-column>
    <el-table-column label="商品" width="200">
      <template #default="scope">
        {{scope.row.commodity}}
      </template>
    </el-table-column>
    <el-table-column label="单价" width="200">
      <template #default="scope">
        {{scope.row.quantity}}
      </template>
    </el-table-column>
    <el-table-column label="数量" width="200">
      <template #default="scope">
        {{scope.row.amount}}
      </template>
    </el-table-column>
    <el-table-column label="金额" width="200">
      <template #default="scope">
        {{scope.row.price}}
      </template>
    </el-table-column>
    <el-table-column label="状态" width="200">
      <template #default="scope">
        {{scope.row.state}}
      </template>
    </el-table-column>
    <el-table-column label="创建时间" width="200">
      <template #default="scope">
        {{scope.row.CreationTime}}
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
        >Edit</el-button>
        <el-button
            size="small"
            type="warning"
            class="button"
            @click="handleDelete(scope.$index, scope.row)"
        >Delete</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog
      v-model="dialogVisible"
      title="Tips"
      width="30%"
      :before-close="handleClose"
  >
    <el-form :inline="true" ref="formRef" :model="formInline" class="demo-form-inline">
      <el-form-item
          prop="commodity"
          :rules="[
            { required: true, message: '请填入相关信息' },
            { type: 'string', message: '需要类型匹配' }
          ]"
          label="商品">
        <el-input v-model="formInline.commodity" placeholder="Approved by" clearable />
      </el-form-item>
      <el-form-item
          prop="price"
          :rules="[
            { required: true, message: '请填入相关信息' },
            { type: 'number', message: '需要类型匹配' }
          ]"
          label="金额">
        <el-input v-model.number="formInline.price" placeholder="Approved by" clearable />
      </el-form-item>
      <el-form-item
          prop="quantity"
          :rules="[
            { required: true, message: '请填入相关信息' },
            { type: 'number', message: '需要类型匹配' }
          ]"
          label="商品数量">
        <el-input v-model.number="formInline.quantity" placeholder="Approved by" clearable />
      </el-form-item>
      <el-form-item
          prop="amount"
          :rules="[
            { required: true, message: '请填入相关信息' },
            { type: 'number', message: '需要类型匹配' }
          ]"
          label="商品单价">
        <el-input v-model.number="formInline.amount" placeholder="Approved by" clearable />
      </el-form-item>
      <el-form-item
          prop="state"
          :rules="[
            { required: true, message: '请填入相关信息' },
            { type: 'string', message: '需要类型匹配' }
          ]"
          label="商品状态">
        <el-select v-model="formInline.state" clearable placeholder="Select">
          <el-option
              label="待付款"
              value="待付款"
          />
          <el-option
              label="代发货"
              value="代发货"
          />
          <el-option
              label="已发货"
              value="已发货"
          />
          <el-option
              label="已完成"
              value="已完成"
          />
          <el-option
              label="已取消"
              value="已取消"
          />
        </el-select>
      </el-form-item>
      <el-form-item
          prop="CreationTime"
          :rules="[
            { required: true, message: '请填入相关信息' },
            { type: 'string', message: '需要类型匹配' }
          ]"
          label="创建时间">
        <!--        <el-input v-model="formInline.CreationTime" placeholder="Approved by" clearable />-->
        <el-date-picker
            v-model.trim="formInline.CreationTime"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="Pick a date"
            :default-value="new Date(2023, 7, 14)"
        />
      </el-form-item>
      <el-form-item style="margin: 0 200px; display: block">
        <el-button type="primary" @click="onSubmit(formRef)">修改</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<style scoped lang="scss">

</style>
